<template>
	<div class="hw-dialog">
		<a-modal
			v-model="modalVisible"
			@ok="handleOk"
			v-bind="$attrs"
			v-on="$listeners"
			:centered="true"
		>
			<template slot="footer">
				<button key="back" @click="handleCancel" class="my-button default-btn">
					{{ CancelText }}
				</button>
				<button
					key="submit"
					class="my-button origin-btn"
					:loading="loading"
					@click="handleOk"
				>
					{{ okText }}
				</button>
			</template>
			<slot></slot>
		</a-modal>
	</div>
</template>

<script>
export default {
	props: {
		visible: {
			type: Boolean,
			default: false,
		},
		CancelText: {
			type: String,
			default: 'Cancel',
		},
		okText: {
			type: String,
			default: 'Save',
		},
		/* footerBoo: {
            type: Boolean,
            default: true,
        }, */
	},
	data() {
		return {
			loading: false,
		}
	},
	computed: {
		modalVisible: {
			get() {
				return this.visible
			},
			set(val) {
				this.$emit('update:visible', val)
			},
		},
	},
	methods: {
		handleOk() {
			this.$emit('ok')
		},
		handleCancel() {
			this.$emit('cancel')
		},
	},
}
</script>

<style lang="less" scoped>
::v-deep .ant-modal-content {
	border-radius: 0 !important;
	.ant-modal-footer {
		text-align: center;
		border: none !important;
		border-radius: 0 !important;
		padding-bottom: 24px !important;
		padding-top: 0 !important;
	}
	.ant-modal-header {
		border: none !important;
		text-align: center;
		padding-top: 32px !important;
		padding-bottom: 0px !important;
		color: var(--3, #333);
		font-family: Play-Regular;
		font-size: 18px;
		line-height: 18px; /* 100% */
	}
	.ant-modal-body {
		// padding: 22px 63px 40px 63px;
		text-align: center;
	}
}

@media screen and (max-width: 768px) {
	::v-deep .ant-modal-content {
		border-radius: 0 !important;
		.ant-modal-footer {
			text-align: center;
			border: none !important;
			border-radius: 0 !important;
			padding-bottom: 20px !important;
			padding-top: 0 !important;
		}
		.ant-modal-header {
			border: none !important;
			text-align: center;
			padding-top: 16px !important;
			padding-bottom: 0px !important;
			color: var(--3, #333);
			font-family: Play-Regular;
			font-size: 12px;
			line-height: 9px; /* 100% */
		}
		.ant-modal-body {
			padding: 16px 24px 32px 24px;
			text-align: center;
		}
	}
}

.my-button {
	height: 36px;
	justify-content: center;
	align-items: center;
	color: #666666;
	border: 1px solid #e5e5e5;
	min-width: 100px;
	font-weight: 400 !important;
}
.origin-btn {
	background: linear-gradient(100deg, #c6f 0%, #66f 100%);
	color: #fff;
}
</style>
